<!--
* @FileDescription: 监控看板
* @Author: yuec621@outlook.com
* @Date: 2025-08-11 11:07:05
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-08-30 10:09:45
-->
<template>
    <div class="pagestyle" style="overflow-y: auto;">
        <cardBgCom style="min-height: 440px;">

            <div>
                <div class="top_title">
                    <p class="p1">通讯服务<span>(运行中<em class="em1">{{ state.yunxing.length }}</em>
                            已停止<em class="em2">{{ state.tingzhi.length }}</em>)</span></p>
                    <p class="p2">
                        <span @click="addserviceClick('新增服务')">
                            <svg-icon icon-class="xinzeng" />新增</span>
                        <span @click="delClick">
                            <svg-icon icon-class="shanchu" />删除</span>
                    </p>
                </div>
                <div v-loading="state.oneloading" v-if="state.oneloading" style="width: 100%;
            height: 340px;display: flex;align-items: center;justify-content: center;">
                </div>
                <el-scrollbar v-else>
                    <div class="one_section">
                        <el-row :gutter="20" :style="{opacity:item.status=='运行中'?1: 0.6}"
                            :class="item.cheked&&item.status=='运行中'?'box active':item.cheked?'box active1':'box'"
                            @click="fuwuIndexClick(item)" v-for="item in state.fuwuIndexList">
                            <el-col :span="24">
                                <div class="sec_title">
                                    <span>{{ item.name }}
                                        <span class="span1">网络延迟<em>{{item.time}}ms</em></span>
                                    </span>
                                    <span
                                        :class="item.status=='运行中'?'stateBox':'stateBox active'">{{item.status}}</span>
                                </div>
                            </el-col>
                            <el-col :span="12" >
                                <div class="imgBox">
                                    <img v-if="item.type=='服务器'&&item.status=='运行中'"
                                     src="./images/fuwuqi.svg"
                                        alt="">
                                    <img v-if="item.type=='服务器'&&item.status!='运行中'"
                                        src="@/assets/images/fuwuqihong.svg" alt="">
                                    <img v-if="item.type=='业务程序'&&item.status=='运行中'"
                                     src="./images/yewu.svg"
                                        alt="">
                                    <img v-if="item.type=='通讯程序'&&item.status=='运行中'"
                                     src="./images/tongxun.svg"
                                        alt="">
                                    <img v-if="item.type=='数据库'&&item.status=='运行中'"
                                     src="./images/shujuku.svg"
                                        alt="">
                                    <p>{{item.desc}}</p>
                                </div>
                                <p class="ipDataList">
                                    <span class="lBox">{{item.type=='服务器'?'IP':'IP端口'}}</span>
                                    <span class="rBox">{{ item.ip }}</span>
                                </p>
                                <p class="ipDataList" v-if="item.type!='服务器'&&item.type!='通讯程序'">
                                    <span class="lBox">数据库地址</span>
                                    <span class="rBox">{{ item.dataSourceUrl }}</span>
                                </p>
                                <p class="ipDataList">
                                    <span class="lBox">安装位置</span>
                                    <span class="rBox">{{ item.place }}</span>
                                </p>
                                <p class="ipDataList">
                                    <span class="lBox">运行时间</span>
                                    <span class="rBox">{{ item.systemUptime }}</span>
                                </p>
                            </el-col>
                            <el-col :span="12">
                                <div class="rOneBox">
                                    <div class="spanBox" v-for="(itemcpu,indexc) in state.cpuDataList">
                                        <span style="width: 50%;text-align: left;"
                                            class="num">{{ indexc ==0?item.cpuUsage==0?'0':item.cpuUsage+'%':
                                        indexc ==1? item.memoryUsage==0?'0':item.memoryUsage+'%':indexc ==2? item.hardwareUsage==0?'0':item.hardwareUsage+'%':item.processNum}}</span>
                                        <p class="p1">
                                            <span>{{ indexc ==3&&item.type!='服务器'?'线程数量':indexc ==3?'进程数量':itemcpu.label }}</span>
                                            <span class="span1"
                                                style="white-space: nowrap;">{{ 
                                            indexc ==0?item.cpuNum==null?'-':item.cpuNum+'核'+item.threadNum
                                            +'线程':indexc ==1?item.memoryTotal==null?'-':item.memoryTotal+' '
                                            +item.memoryType==null?'-':item.memoryType
                                            :indexc ==2?item.hardwareTotal==null?'-':'共'+item.hardwareTotal:itemcpu.desc }}</span>
                                        </p>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="24" style="min-height: 76px;">
                                <div class="bottomBox" v-if="item.type !='服务器'">
                                    <p class="p1">
                                        <span>
                                            服务端应用状态
                                        </span>
                                        <span v-if="item.type !='业务程序'" style="display: flex;align-items: center;">
                                            <svg-icon icon-class="zhongqi" style="color: rgba(68, 136, 255, 1);" />重启
                                        </span>
                                    </p>
                                    <div class="p1">
                                        <p>
                                            <span class="lBox">心跳</span>
                                            <span class="rBox" style="margin-left: 6px;">
                                                {{ item.heartBeat }}
                                            </span>
                                        </p>
                                        <p v-if="item.type!='通讯程序'">
                                            <span class="lBox">用户</span>
                                            <span class="rBox" style="margin-left: 6px;cursor: pointer;"
                                                @click="jiexiClick('管理用户',item)">
                                                {{ item.userList&&item.userList.length }}
                                            </span>
                                        </p>
                                        <p v-if="item.type !='业务程序'">
                                            <span class="lBox">异常日志</span>
                                            <el-button type="text" class="rBox" @click="jiexiClick('异常日志')">
                                                正常
                                            </el-button>
                                        </p>
                                        <p v-if="item.type !='业务程序'">
                                            <span class="lBox">过期时间</span>
                                            <span style="cursor: pointer;margin-left: 10px;" class="rBox"
                                                @click="addserviceClick('应用狗信息',item)">
                                                {{ item.overTime==null?'-':item.overTime }}
                                            </span>
                                        </p>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </el-scrollbar>
            </div>
        </cardBgCom>
        <cardBgCom style="margin-top: 10px;">
            <div class="top_title">
                <p class="p1">通道总览<span>(共<em class="em1">{{ state.channelNoList.length }}</em>个)</span>
                    <el-input v-model="state.tongdaoValue" style="width: 240px;margin-left: 20px;" size="small"
                        placeholder="请输入通道号搜索" @blur="tongdaoBlur" :suffix-icon="Search" />
                </p>
            </div>
            <el-scrollbar>
                <div class="two_section">
                    <div :class="state.channelNoType==item.channelNo?'box active' : 'box'" @click="channelNoClick(item)"
                        v-for="item in 
                    state.channelNoList">
                        <p class="p1">{{ item.channelName }}</p>
                        <p>巡检周期<em class="em1" :style="{color:item.cycleColor}">{{item.channelCycle}}</em></p>
                        <p>设备数量<em class="em1">{{item.stationCounts}}台</em></p>
                    </div>
                </div>
            </el-scrollbar>
            <div class="top_title" style="margin-top: 10px;">
                <p class="p1" style="display: flex;align-items: center;">
                    <el-select v-model="state.stationCode" placeholder="请选择" size="small" style="margin-right: 10px;"
                        @change="realListChange">
                        <el-option v-for="item in  state.stationList"
                            :label="item.stationCode+'-'+item.stationPlaceName" :value="item.stationCode"
                            :key="item.stationCode">
                        </el-option>
                    </el-select>
                    <el-checkbox-group v-model="state.checkedCities" @change="realListChange">
                        <el-checkbox v-for="city in [{label:'接收数据',value:'Receive'},
                        {label:'发送数据',value:'Original'}]" :key="city.value" :label="city.value" :value="city.value">
                            {{ city.label }}
                        </el-checkbox>
                    </el-checkbox-group>
                    <el-checkbox v-model="state.stationCodeShow" style="margin-left: 20px;">显示分站号</el-checkbox>
                    <span :class="state.pauseShow?'btnBox active':'btnBox'" @click="pauseClick">{{ 
                    state.pauseShow?'开始':'暂停' }}
                    </span>
                </p>
                <el-button type="primary" size="small" :disabled="state.jiexiDis" @click="jiexiClick('数据解析')">数据解析
                </el-button>
            </div>
            <div class="jiexiBox" style="min-height: 100px;">
                <p v-for="item in state.realList">
                    <span v-if="state.stationCodeShow">
                        【{{item.stationCode}}】</span><span>
                        {{item.dateTime}}
                    </span>
                    <span>{{ item.communicateData }}</span>
                </p>
            </div>
        </cardBgCom>
        <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="400" 
        :height="auto" v-model="state.addModal"
            resize :mask="true" showFooter>
            <template #title>
                <div class="w100 h100 fsc mask_title">{{state.modalTitle}}</div>
            </template>
            <template #default>
                <div class="form_box">
                    <el-form ref="smallformRef" v-if="state.modalTitle=='新增服务'" :model="state.formData"
                        :rules="state.rules" label-position="top">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="服务名称" prop="name">
                                    <el-input v-model="state.formData.name" placeholder="请输入">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="类型" prop="type">
                                    <el-select class="w100" ref="stationCodeRef" filterable
                                        v-model="state.formData.type" placeholder="请选择">
                                        <el-option v-for="item in state.stationmodelList" :key="item" :label="item"
                                            :value="item">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="安装位置" prop="place">
                                    <el-input v-if="state.formData.type=='服务器'" v-model="state.formData.place"
                                        placeholder="请输入">
                                    </el-input>
                                    <el-select v-else class="w100" filterable v-model="state.formData.place"
                                        placeholder="请选择">
                                        <el-option v-for="item in state.placelList" :key="item.name" :label="item.name"
                                            :value="item.name">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24" v-if="state.formData.type=='服务器'">
                                <el-form-item label="IP" prop="ip">
                                    <el-input v-model="state.formData.ip" placeholder="请输入">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24" v-else>
                                <el-form-item label="Port" prop="port">
                                    <el-input v-model.number="state.formData.port" placeholder="请输入">
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div v-if="state.modalTitle=='应用狗信息'" class="gouListBox">
                        <p v-for="item in state.gouList">
                            <span class="lBox">{{item.label}}</span><span class="rBox">
                                <span v-if="item.label !='过期提醒'&&item.label !='提醒内容'">{{item.value}}</span>
                                <span v-else-if="item.label !='过期提醒'&&item.label =='提醒内容'" v-html="item.value"></span>
                                <span style="color: rgba(68, 136, 255, 1);" v-else>{{item.value}}</span>
                            </span>
                        </p>
                    </div>
                </div>
            </template>
            <template #footer v-if="state.modalTitle!='应用狗信息'">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitFormsmall">
                    确定
                </el-button>
            </template>
        </vxe-modal>
        <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="1250" :height="auto"
            v-model="state.descModal" resize :mask="true" showFooter>
            <template #title>
                <div class="w100 h100 fsc mask_title">{{state.descmodalTitle}}</div>
            </template>
            <template #default>
                <div class="form_box">
                    <el-form ref="jiexiformRef" v-if="state.descmodalTitle=='数据解析'" :model="state.jiexiformData"
                        :rules="state.jiexirules" label-position="left">
                        <el-row :gutter="20">
                            <el-col :span="6">
                                <el-form-item label="通道号" prop="channelNo">
                                    <el-select class="w100" filterable v-model="state.jiexiformData.channelNo"
                                        placeholder="请选择" @change="jiexiqueryChange($event,1)">
                                        <el-option v-for="item in state.channelNoList" :key="item.channelNo"
                                            :label="item.channelName" :value="item.channelNo">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="分站号" prop="stationCode">
                                    <el-select class="w100" filterable v-model="state.jiexiformData.stationCode"
                                        placeholder="请选择" @change="jiexiqueryChange">
                                        <el-option v-for="item in state.stationList"
                                            :label="item.stationCode+'-'+item.stationPlaceName"
                                            :value="item.stationCode" :key="item.stationCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="数据类型" prop="communicateType">
                                    <el-select class="w100" filterable v-model="state.jiexiformData.communicateType"
                                        placeholder="请选择" @change="jiexiqueryChange">
                                        <el-option v-for="item in [{label:'接收数据',value:'Receive'},
                        {label:'发送数据',value:'Original'}]" :key="item.value" :label="item.label" :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="搜索时间" prop="dateTimeLabel">
                                    <el-cascader class="w100" ref="communicateTimeRef"
                                        v-model="state.jiexiformData.dateTimeLabel" :options="state.communicateTimeList"
                                        :props="{value:'label',emitPath:false}" @change="communicateTimeRefChange" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" @click="jiexiDetailClick(1)">查询</el-button>
                                <el-button type="info" @click="jiexiDetailClick(2)">重置</el-button>
                            </el-col>
                            <el-col :span="12">
                                <div class="jiexiList">
                                    <div style="height:360px;overflow-y: auto;">
                                        <p :class="state.jiexiType == index?'active':''"
                                            v-for="(item,index) in state.hisList">
                                            <span>{{item.communicateData}}</span>
                                            <el-button class="btn" type="text" @click="lookjiexiClick(item,index)">查看解析
                                            </el-button>
                                        </p>
                                    </div>
                                    <p style="position: absolute;bottom: 10px;left: 10px;">
                                        <el-pagination :pager-count="2"
                                            v-model:current-page="state.jiexiformData.pageNum"
                                            v-model:page-size="state.jiexiformData.pageSize"
                                            :page-sizes="[10, 20, 30, 40]" background
                                            layout="total, sizes, prev, pager, next, jumper"
                                            :total="state.jiexiformData.total" @size-change="pagechangeSize"
                                            @current-change="pagechange" />
                                    </p>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="jiexidesc" style="height: 100%;">
                                    <p style="font-weight: 700;">解析详情</p>
                                    <p style="margin-top: 10px;">原始数据：TX::FF FF FF OB 10 06 00 00 00 00 00 00 00 E200
                                        10FF FFEE</p>
                                    <p style="margin-top: 10px;">解析内容：</p>
                                    <div class="jiexidesc" style="min-height: 100px;">

                                    </div>
                                    <p style="margin-top: 10px;">原解析内容：</p>
                                    <div class="jiexidesc" style="min-height: 100px;">

                                    </div>
                                    <p style="display: flex;
                                    justify-content: space-between;margin-top: 10px;">
                                        <span>上一包 2025-07-04 14:05:22.1010 </span>
                                        <span>下一包 2025-07-04 14:05:22.1010 </span>
                                    </p>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <vxe-table height="300" v-if="state.descmodalTitle=='管理用户'" class="w100" :data="state.userList"
                        border="inner">
                        <vxe-column type="seq" title="序号"></vxe-column>
                        <vxe-column :field="item.field" :title="item.title" v-for="item in state.tableheads">
                        </vxe-column>
                        <!-- <vxe-column field="pointValueStr" title="创建时间"></vxe-column>
                        <vxe-column field="startTime" title="创建人"></vxe-column> -->
                        <vxe-column field="endTime" title="操作">
                            <template #default="{row}">
                                <el-button type="text" @click="passClick(1,row)">修改</el-button>
                                <el-button type="text" @click="useJQClick(row)">{{row.status==0?'禁用':'启用'}}</el-button>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
                <div v-if="state.descmodalTitle=='异常日志'">
                    <p style="display: flex;justify-content: space-between;">
                        <el-radio-group v-model="state.tabPosition">
                            <el-radio-button value="top">通讯类2</el-radio-button>
                            <el-radio-button value="right">解析类2</el-radio-button>
                        </el-radio-group>
                        <el-input v-model="state.tongdaoValue" style="width: 240px;margin-left: 20px;" size="small"
                            placeholder="请输入" :suffix-icon="Search" />
                    </p>
                    <el-collapse style="margin-top: 10px;" v-model="state.activeNames" @change="handleChange">
                        <el-collapse-item
                            title="2020-07-07 00:00:00 java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635)"
                            name="1" :icon="CaretRight">
                            <div>
                                Consistent with real life: in line with the process and logic of real
                                life, and comply with languages and habits that the users are used to;
                            </div>
                        </el-collapse-item>
                        <el-collapse-item
                            title=" 2020-07-07 00:00:00 java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635)  "
                            name="2">
                            <template #icon="{ isActive }">
                                <span class="icon-ele">
                                    {{ isActive ? '展开' : '收起' }}
                                </span>
                            </template>
                            <div>
                                2020-07-07 00:00:00
                                java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:635)
                            </div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </template>
            <template #footer v-if="state.descmodalTitle!='管理用户'">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitForm">
                    确定
                </el-button>
            </template>
        </vxe-modal>
        <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="300" 
        :height="auto" v-model="state.visible"
            resize :mask="true" showFooter>
            <el-form ref="pwdRef" :model="state.userpwd" :rules="state.rulespwd" label-width="80px">
                <el-form-item label="登录名">
                    <el-input disabled v-model="state.userpwd.userName" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="state.userpwd.newPassword" placeholder="请输入新密码" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="state.userpwd.confirmPassword" placeholder="请确认新密码" type="password"
                        show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="passClick(0)">取消</el-button>
                    <el-button type="primary" @click="passClick(2)">保存</el-button>
                </el-form-item>
            </el-form>
        </vxe-modal>
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        onMounted,
        reactive
    } from "vue";
    import {
        changeUserStatus
    } from "@/api/system/user";
    import cardBgCom from "@/components/commonCom/cardBgCom";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request";
    import usePagesStore from "@/store/modules/pages";
    import {
        ElMessage,
        ElMessageBox,
        ElNotification
    } from "element-plus";
    import dayjs from "dayjs";

    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore();
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP;
    const upload = ref(null);
    /** 自定义校验 */
    // ip
    const validateip = (rule, value, callback) => {
        let reg =
            /^(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[0-9])\.((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){2}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)$/
        if (!reg.test(value))
            return callback(new Error("请输入正确的IP"));
        callback();
    }
    // 端口
    const validatePass = (rule, value, callback) => {
        let reg = new RegExp(/^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/);
        if (!reg.test(value))
            return callback(new Error("请输入正确端口(0-65535)"));
        callback();
    }
    const equalToPassword = (rule, value, callback) => {
        if (state.userpwd.newPassword !== value) {
            callback(new Error("两次输入的密码不一致"));
        } else {
            callback();
        }
    };
    const state = reactive({
        tableheads: computed(() => table_headers.diag_user),
        userList: [],
        yunxing: [],
        tingzhi: [],
        oneloading: false,
        jiexiType: 0,
        hisList: [],
        communicateTimeList: [],
        fuwuIndexType: undefined,
        cpuDataList: [{
                num: '90',
                label: 'CPU',
                desc: '4核16线程'
            },
            {
                num: '90',
                label: '内存',
                desc: '4核16线程'
            }, {
                num: '90',
                label: '硬盘',
                desc: '4核16线程'
            }, {
                num: '90',
                label: '进程数量'
            }
        ],
        tongdaoValue: undefined,
        modalTitle: '新增服务',
        addModal: false,
        formData: {},
        stationmodelList: [],
        fuwuIndexList: [],
        placelList: [],
        rules: {
            name: [{
                required: true,
                message: '请输入服务名称',
                trigger: 'blur'
            }],
            place: [{
                required: true,
                message: '请输入安装位置',
                trigger: 'change'
            }],
            type: [{
                required: true,
                message: '请选择类型',
                trigger: 'change'
            }],
            ip: [{
                required: true,
                message: '请输入ip',
                trigger: 'blur'
            }, {
                validator: validateip,
                trigger: 'blur'
            }],
            port: [{
                    required: true,
                    message: '请输入端口',
                    trigger: 'blur'
                }, {
                    type: 'number',
                    message: '请输入数字',
                    trigger: 'blur'
                },
                {
                    validator: validatePass,
                    trigger: 'blur'
                }
            ],
        },
        descModal: false,
        descmodalTitle: '异常日志',
        gouList: [{
            label: '使用方',
            value: '山东煤矿'
        }, {
            label: '注册时间',
            value: '山东煤矿'
        }, {
            label: '过期时间',
            value: '山东煤矿'
        }, {
            label: '过期后动作',
            value: '山东煤矿'
        }, {
            label: '过期提醒',
            value: '山东煤矿'
        }, {
            label: '提醒时间',
            value: '山东煤矿'
        }, {
            label: '提醒内容',
            value: '山东煤矿'
        }],
        gouqian: '',
        gouhou: '',
        activeNames: '1',
        tabPosition: 'top',
        // 通道总览
        channelNoList: [],
        channelNoListcun: [],
        channelNoType: undefined,
        stationList: [],
        stationCode: undefined,
        realList: [],
        stationCodeShow: true,
        jiexiDis: true,
        jiexiformData: {
            pageNum: 1,
            pageSize: 10,
        },
        jiexirules: {
            channelNo: [{
                required: true,
                message: '请选择通道号',
                trigger: 'change'
            }],
            stationCode: [{
                required: true,
                message: '请选择分站号',
                trigger: 'change'
            }],
            communicateType: [{
                required: true,
                message: '请选择数据类型',
                trigger: 'change'
            }],
            dateTimeLabel: [{
                required: true,
                message: '请选择搜索时间',
                trigger: 'change'
            }],
        },
        userpwd: {},
        rulespwd: {
            newPassword: [{
                required: true,
                message: "新密码不能为空",
                trigger: "blur"
            }, {
                min: 6,
                max: 20,
                message: "长度在 6 到 20 个字符",
                trigger: "blur"
            }, {
                pattern: /^[^<>"'|\\]+$/,
                message: "不能包含非法字符：< > \" ' \\\ |",
                trigger: "blur"
            }],
            confirmPassword: [{
                required: true,
                message: "确认密码不能为空",
                trigger: "blur"
            }, {
                required: true,
                validator: equalToPassword,
                trigger: "blur"
            }]
        },
        visible: false
    })
    let timer = null
    let timer1 = null
    function cancel(){
        state.addModal=false
    }

    function passClick(type, row) {
        if (type == 1) {
            state.visible = true
            state.userpwd.userName = row.userName
            state.userpwd.userId = row.userId
        } else if (type == 0) {
            state.visible = false
        } else if (type == 2) {
            proxy.$refs.pwdRef.validate(valid => {
                if (valid) {
                    axios.put('/system/user/resetPwd', {
                        userId: state.userpwd.userId,
                        password: state.userpwd.confirmPassword
                    }).then(res => {
                        proxy.$modal.msgSuccess(res.msg)
                        state.visible = false
                    })
                }
            })
        }
    }

    function addserviceClick(title, item) {
        state.addModal = true
        state.modalTitle = title
        state.formData = {}
        fuwuList('服务器')
        state.gouList.forEach((itemsub, index) => {
            if (index == 0) { //1
                itemsub.value = item.useName
            } else if (index == 1) { //2
                itemsub.value = item.registerTime
            } else if (index == 2) {
                itemsub.value = item.overTime
            } else if (index == 3) {
                itemsub.value = item.overMotion
            } else if (index == 4) {
                itemsub.value = item.isEnabledWarnTime ? '启用' : '不启用'
            } else if (index == 5) {
                itemsub.value = item.warnTime
            } else if (index == 6) {
                if (item.warnContent.includes('{0}')) {
                    var index = item.warnContent.indexOf("{0}")
                    var resolve = item.warnContent.substring(0, index);
                    var indexs = item.warnContent.indexOf("{0}")
                    var resolves = item.warnContent.substring(indexs + 3, item.warnContent.length);
                    itemsub.value = resolve +
                        `<span style="color:red;font-weight:700;">${item.warnTime}</span>` + resolves
                } else {
                    itemsub.value = item.warnContent
                }
            }
        })

    }

    function fuwuList(type) {
        let yunxing = []
        let tingzhi = []
        state.oneloading = true
        axios.post('/soft/list', {
            type: type,
            time: dayjs().valueOf()
        }).then(res => {
            state.oneloading = false
            res.data.forEach(item => {
                if (item.status == '运行中') {
                    yunxing.push(item)
                } else {
                    tingzhi.push(item)
                }
            })
            state.yunxing = yunxing
            state.tingzhi = tingzhi
            if (type) {
                state.placelList = res.data
            } else {
                state.fuwuIndexList = res.data
            }
        })
    }

    function getselList() {
        axios.get('/soft/types').then(res => {
            state.stationmodelList = res.data
        })
    }
    fuwuList()
    getselList()

    function submitFormsmall() {
        proxy.$refs["smallformRef"].validate(valid => {
            if (valid) {
                axios.post('/soft/add', state.formData).then(res => {
                    proxy.$modal.msgSuccess(res.msg);
                    fuwuList()
                    state.addModal = false
                })
            }
        })
    }

    function fuwuIndexClick(item) {
        item.cheked = !item.cheked
    }

    function delClick() {
        let data = []
        if (state.fuwuIndexList.length > 0) {
            state.fuwuIndexList.forEach(item => {
                if (item.cheked) {
                    data.push(item.id)
                }
            })
        }
        if (data.length > 0) {
            ElMessageBox.confirm(
                    '确定要删除该数据吗?',
                    '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                .then(() => {
                    axios.post('/soft/delete', data).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                type: 'success',
                                message: res.msg,
                            })
                            fuwuList()
                        }
                    })

                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '删除取消',
                    })
                })
        } else {
            ElMessage({
                type: 'warning',
                message: '至少选择一条数据进行删除',
            })
        }
    }

    function useJQClick(row) {
        let text = row.status === "0" ? "禁用" : "启用";
        proxy.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗?').then(function () {
            return changeUserStatus(row.userId, row.status == 0 ? 1 : 0);
        }).then(() => {
            proxy.$modal.msgSuccess(text + "成功");
            row.status = row.status === "0" ? "1" : "0";
        }).catch(function () {

        });
    }

    // 通道总览

    function jiexiClick(title, item) {
        state.descModal = true
        state.descmodalTitle = title
        state.userList = item.userList
    }
    // 通道总览选中事件
    function channelNoClick(item) {
        state.channelNoType = item.channelNo
        state.jiexiformData.channelNo = item.channelNo
        state.stationList = item.stations
        state.jiexiDis = false
        getrealList()
        clearInterval(timer)
        clearInterval(timer1)
        timer = setInterval(() => {
            getrealList()
        }, 2000);
       
    }

    function realListChange() {
        state.jiexiformData.stationCode = state.stationCode
        getrealList()
    }
    // 获取数据接口
    function getList() {
        axios.get('/communicate/channelStations').then(res => {
            state.channelNoList = res.data
            state.channelNoListcun = res.data
        })
    }

    function getrealList() {
        axios.post('/communicate/realList', {
            channelNo: state.channelNoType,
            stationCode: state.stationCode,
            communicateTypes: state.checkedCities,
        }).then(res => {
            state.realList = res.data
        })
    }

    const visible = ref(false)



    getList()

    function tongdaoBlur() {
        if (state.tongdaoValue) {
            let data = []
            state.channelNoList.forEach(item => {
                if (item.channelNo == state.tongdaoValue) {
                    data.push(item)
                }
            })
            state.channelNoList = data
        } else {
            state.channelNoList = state.channelNoListcun
        }
    }

    function pauseClick() {
        state.pauseShow = !state.pauseShow
        if (state.pauseShow) {
            clearInterval(timer)
            clearInterval(timer1)
        } else {
            timer1 = setInterval(() => {
                getrealList()
            }, 2000);
        }
    }

    // 数据解析详情弹框事件
    function getcommunicateTime() {
        axios.post('/communicate/communicateDateTimes', {
            channelNo: state.jiexiformData.channelNo,
            stationCode: state.jiexiformData.stationCode,
            communicateType: state.jiexiformData.communicateType
        }).then(res => {
            state.communicateTimeList = res.data.map(item => {
                return {
                    label: item.date,
                    children: item.hours.map(itemsub => {
                        return {
                            label: itemsub
                        }
                    })
                }
            })

        })
    }

    function communicateTimeRefChange(val) {
        state.jiexiformData.dateTime = proxy.$refs['communicateTimeRef'].getCheckedNodes()[0].parent.label + state
            .jiexiformData.dateTimeLabel
    }

    function jiexiqueryChange(val, type) {
        if (type == 1) {
            state.jiexiformData.stationCode = undefined
            state.channelNoList.forEach(item => {
                if (item.channelNo == val) {
                    state.stationList = item.stations
                }
            })
        }
        getcommunicateTime()
    }

    function jiexiDetailClick(type) {
        if (type == 1) {
            proxy.$refs["jiexiformRef"].validate(valid => {
                if (valid) {
                    getjiexihisList()
                }
            })
        } else if (type == 2) {
            state.jiexiformData.communicateType = undefined
            state.jiexiformData.dateTimeLabel = undefined
            state.hisList = []
        }

    }

    function getjiexihisList() {
        axios.post('/communicate/hisList', state.jiexiformData).then(res => {
            state.hisList = res.data.list
            state.jiexiformData.total = res.data.total
        })
    }
    // 分页
    function pagechangeSize(val) {
        state.jiexiformData.pageNum = 1
        state.jiexiformData.pageSize = val
        getjiexihisList()
    }

    function pagechange(val) {
        state.jiexiformData.pageNum = val
        getjiexihisList()
    }

    function lookjiexiClick(item, index) {
        state.jiexiType = index
    }
    onMounted(() => {

    })
</script>
<style lang="scss" scoped>
    :deep(.el-collapse-item__wrap),
    :deep(.el-collapse-item__header) {
        background-color: rgba(91, 109, 128, 0.08);
    }

    .icon-ele {
        margin: 0 8px 0 auto;
        color: #409eff;
    }

    .gouListBox {
        p {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;

            span {
                width: 50%;

                &.rBox {
                    text-align: right;
                }
            }
        }
    }

    .jiexiList {
        background-color: rgba(91, 109, 128, 0.08);
        border-radius: 2px;
        padding: 8px 8px 40px 8px;
        position: relative;



        p {
            display: flex;
            align-items: center;

            &.active {
                background-color: rgba(68, 136, 255, 0.16);
            }

            span {
                display: inline-block;
                width: 90%;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }

    .jiexidesc {
        background-color: rgba(91, 109, 128, 0.08);
        border-radius: 2px;
        padding: 8px 8px 8px 8px;
    }

    .btnBox {
        margin-left: 10px;
        background-color: rgba(91, 109, 128, 0.08);
        padding: 6px;
        display: flex;
        align-items: center;
        cursor: pointer;

        &.active {
            background: rgba(102, 204, 51, 1);
            color: #fff;
        }
    }

    .lBox {
        font-size: 14px;
        color: rgba(62, 70, 79, 0.6);
    }

    .rBox {
        color: rgba(62, 70, 79, 1);
        font-size: 14px;
    }

    p {
        margin: 0;
        padding: 0;
    }

    .top_title {
        display: flex;
        justify-content: space-between;
        color: rgba(62, 70, 79, 1);
        align-items: center;

        .p1 {
            font-size: 20px;
            font-weight: 700;


            span {
                font-size: 14px;
                margin-left: 10px;
            }

            em {
                font-style: normal;
                margin-left: 10px;

                &.em1 {
                    margin-right: 10px;
                    color: rgba(68, 136, 255, 1);
                    font-weight: 700;
                }
            }
        }

        .p2 {
            font-size: 16px;
            display: flex;
            cursor: pointer;

            span {
                margin-left: 10px;
                background-color: rgba(91, 109, 128, 0.08);
                padding: 6px;
                display: flex;
                align-items: center;
            }
        }

    }

    .one_section {
        display: flex;
        margin-top: 10px;
        width: fit-content;

        .box {
            width: 503px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.4);
            border: 1px solid rgba(91, 109, 128, 0.08);
            padding: 16px 5px;
            flex-shrink: 0;
            text-align: center;
            border-radius: 4px;
            margin-left: 10px !important;
            margin-right: 10px !important;
            border: 1px solid transparent;

            &.active {
                border: 1px solid rgba(68, 136, 255, 1);
                box-shadow: 1px 1px 30px 1px rgba(68, 136, 255, .2) inset;
            }

            &.active1 {
                box-shadow: 1px 1px 30px 1px rgba(232, 60, 60, 0.2) inset;
                border: 1px solid rgba(232, 60, 60, 1);
            }

            .sec_title {
                margin-bottom: 10px;
                font-size: 20px;
                font-weight: 700;
                align-items: center;
                padding: 8px 0 8px 16px;
                border-radius: 2px;
                background: linear-gradient(90deg, rgba(68, 136, 255, .2) 0%, rgba(68, 136, 255, 0.2) 48.73%, rgba(68, 136, 255, 0) 100%);
                display: flex;
                justify-content: space-between;

                .span1 {
                    font-size: 14px;
                    color: rgba(62, 70, 79, 0.6);

                    em {
                        font-style: normal;
                        margin-left: 10px;
                        color: rgba(68, 136, 255, 1);
                    }
                }

                .stateBox {
                    border-radius: 4px;
                    background: rgba(102, 204, 51, 1);
                    font-size: 12px;
                    color: #fff;
                    padding: 2px 6px;

                    &.active {
                        background-color: rgba(232, 60, 60, 1);
                    }

                }
            }
        }
    }

    .imgBox {
        margin: 30px 0 60px 0;
        text-align: center;
    }

    .ipDataList {
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .rOneBox {
        .spanBox {
            margin-top: 10px;
            border-radius: 4px;
            background: rgba(91, 109, 128, 0.04);
            padding: 12px 16px 12px 16px;
            display: flex;
            align-items: center;

            .num {
                font-weight: 700;
                font-size: 28px;
                color: rgba(68, 136, 255, 1);
            }

            .p1 {
                display: flex;
                flex-direction: column;
                text-align: left;
                margin-left: 10px;
                font-size: 14px;
                color: rgba(62, 70, 79, 1);

                span {
                    display: block;

                    &.span1 {
                        color: rgba(62, 70, 79, .6);
                    }
                }
            }
        }
    }

    .bottomBox {
    
        border-radius: 4px;
        background: rgba(91, 109, 128, 0.04);
        padding: 8px 16px 8px 16px;
        margin-top: 10px;

        .p1 {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            color: rgba(62, 70, 79, 1);

            p {
                font-size: 14px;
            }
        }
    }

    .two_section {
        display: flex;
        width: fit-content;
        margin-top: 10px;

        .box {
            width: 150px;
            border-radius: 4px;
            background: rgba(91, 109, 128, 0.04);
            padding: 16px;
            flex-shrink: 0;
            text-align: left;
            border-radius: 4px;
            padding: 8px 16px 8px 16px;
            color: rgba(62, 70, 79, 1);
            margin-right: 10px;
            cursor: pointer;
            border: 1px solid transparent;

            &.active {
                background-color: rgba(68, 136, 255, 0.08);
                border: 1px solid rgba(68, 136, 255, 1);

            }

            .p1 {
                font-weight: 700;
                margin-bottom: 6px;
            }

            em {
                font-style: normal;
                margin-left: 10px;

                &.em2 {
                    color: rgba(255, 85, 85, 1);
                }

                &.em1 {
                    font-weight: 700;
                    color: rgba(68, 136, 255, 1);
                }
            }
        }
    }

    .jiexiBox {
        margin-top: 10px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(91, 109, 128, 0.08);
        padding: 16px;
        display: flex;
        flex-direction: column;

        p {
            display: flex;
            align-items: center;
            color: rgba(62, 70, 79, 1);
            font-size: 16px;
            font-weight: 400;

        }
    }
</style>